// @ts-nocheck
import "@common/css/reset.scss";
import "./index.scss";

declare let $: any;
declare let layer: any;

export default $(function () {
  class RotateImg {
    canvasId: string;
    constructor(configs: {}) {
      this.configs = configs;
      configs.image = new Image();
      configs.image.src = configs.img
      configs.deg = 0;
      configs.image.onload = function () {
        configs.canvas = document.createElement("canvas")
        configs.width = this.naturalWidth;
        configs.height = this.naturalHeight;
        $("#preview").addClass("show");
        configs.canvas.width = configs.width;
        configs.canvas.height = configs.height;
        configs.canvas.id = "canvas-borad"
        configs.context = configs.canvas.getContext("2d");
        configs.context.rotate((0 * Math.PI) / 180)
        configs.context.drawImage(configs.image, 0, 0, configs.width, configs.height);
        $(`#${configs.canvasId}`).html(configs.canvas)
      };
      $("#preview").on("click", "span", function () {
        if ($(this).hasClass("left")) {
          configs.deg -= 90
        } else if ($(this).hasClass("right")) {
          configs.deg += 90
        }
        if (configs.deg < 0) {
          configs.deg += 360
        } else if (configs.deg > 360) {
          configs.deg -= 360
        }
        if (configs.deg % 360 == 0) {
          $("#canvas-borad").attr("width", configs.width)
          $("#canvas-borad").attr("height", configs.height)
          configs.context.rotate((0 * Math.PI) / 180)
          configs.context.drawImage(configs.image, 0, 0, configs.width, configs.height);
        } else if (configs.deg % 360 == 90) {
          $("#canvas-borad").attr("width", configs.height)
          $("#canvas-borad").attr("height", configs.width)
          configs.context.rotate((90 * Math.PI) / 180)
          configs.context.drawImage(configs.image, 0, -configs.height, configs.width, configs.height);
        } else if (configs.deg % 360 == 180) {
          $("#canvas-borad").attr("width", configs.width)
          $("#canvas-borad").attr("height", configs.height)
          configs.context.rotate((180 * Math.PI) / 180)
          configs.context.drawImage(configs.image, -configs.width, -configs.height, configs.width, configs.height);
        } else if (configs.deg % 360 == 270) {
          $("#canvas-borad").attr("width", configs.height)
          $("#canvas-borad").attr("height", configs.width)
          configs.context.rotate((270 * Math.PI) / 180)
          configs.context.drawImage(configs.image, -configs.width, 0, configs.width, configs.height);
        }

        configs.context.save();
        context = configs.context;
        $("#canvasimg").hide();
        return false
      })
      $("#preview").on("click", ".close", function () {
        $("#preview").removeClass("show")
        $(".drawToolbar").hide();
        $("#save").hide();
      })
    }
  }
  const dom = null;
  let context = null;
  $("img[preview]").on("click", function () {
    dom = $(this)
    new RotateImg({
      canvasId: "box",
      img: $(this).attr("src")
    });
    $("#scrawl-main").find(".left").show()
    $("#scrawl-main").find(".right").show()
    $("#scrawl-main").find("#bj").show()
  });
  var a = null;
  $("#bj").on("click", function () {
    const canvas = document.createElement("canvas")
    canvas.width = $("#canvas-borad").attr("width");
    canvas.height = $("#canvas-borad").attr("height");
    canvas.id = "borad"
    $("#scrawl-main").find(".left").hide()
    $("#scrawl-main").find(".right").hide()
    $("#scrawl-main").find("#bj").hide()
    $("#scrawl-main").find("#save").show()
    $(".drawToolbar").show();
    $("#box").append(canvas)
    a = new Canvas({
      canvasId: "borad",
      width: canvas.width,
      height: canvas.height,
      dom,
      save: function (data) {
        console.log(data)
        dom.attr("src", data)
        // $("#preview").hide();
        // dom.attr("src", data)
      }
    });
  });
  $("#save").on("click", function () {
    a.save(context);
    $("#preview").removeClass("show")
    $("#scrawl-main").find("#save").hide()
    $(".drawToolbar").hide();
  })
});

(function ($) {

  // 设置元素可用状态
  $.fn.enable = function () {
    $(this).addClass("active");
    $(this).removeAttr("disabled");
  }

  // 设置元素不可用状态
  $.fn.disable = function () {
    $(this).removeClass("active");
    $(this).attr("disabled", true);
  }

  var Canvas = function (options) {
    var configs = {
      width: 360,
      height: 300,
      save: function (data) {
      }
    }; //默认配置
    options = options || {};
    $.extend(configs, options);

    var canvas = $("#" + configs.canvasId)[0]; //画布
    canvas.width = configs.width;
    canvas.height = configs.height;
    var context = canvas.getContext("2d"); //绘图环境
    context.lineCap = "round";　//设置线条两端为圆弧
    context.lineJoin = "round";　//设置线条转折为圆弧
    //设置默认颜色
    setColor();
    var $prevBtn = $("#J_prevStep"); //上一步
    var $nextBtn = $("#J_nextStep"); //下一步
    var $clearBtn = $("#J_clearBoard"); //清空画板
    var drawing = false; //是否正在绘制
    var erasering = false; //是否正在擦除
    var prevSteps = []; //返回上一步操作集合
    var nextSteps = []; //恢复下一步操作集合
    var o = {}; //导出api对象

    $("#picBoard").css({
      width: configs.width + "px",
      height: configs.height + "px"
    });

    // 事件绑定
    canvas.onmousedown = startDrawing;
    canvas.onmouseup = stopDrawing;
    canvas.onmouseout = stopDrawing;
    canvas.onmousemove = doDrawing;
    $prevBtn.on("click", gotoPrevStep);
    $nextBtn.on("click", gotoNextStep);
    $clearBtn.on("click", clearBoard);

    // 清空设置
    $("#clearSetting").on("click", function () {
      context.lineWidth = 1;
      setColor($(".colorBar span:first").data("color"));
      context.shadowBlur = 0;
      alert("画笔已重新初始化，请重新配置画笔。");
    });

    //上传背景图片
    // $("#J_canvas_bg").on("change", function () {

    //   if ($("#picBoard img").length > 0) {
    //     $("#picBoard img:eq(0)").attr("src", window.URL.createObjectURL(this.files[0]));
    //     return;
    //   }
    //   var $img = '<img src="' + window.URL.createObjectURL(this.files[0]) + '" width="' + configs.width + '" height="' + configs.height + '" />';
    //   $("#picBoard").append($img);

    //   // 激活删除背景按钮
    //   $("#J_removeImg").enable();

    // });

    // // 删除背景图片
    // $("#J_removeImg").on("click", function () {
    //   $("#picBoard").empty();
    //   $(this).disable();
    // });

    //保存图片
    // $('#J_saveImg').on("click", saveImage);

    // 设置笔刷大小
    $("#scrawl-main .brush-size").on("click", function () {

      context.restore(); //恢复到canvas的上一个状态
      context.lineWidth = parseInt($(this).text());
      erasering = false;

    });

    // 设置笔触虚化
    $("#scrawl-main .blur-size").on("click", function () {
      context.shadowBlur = parseInt($(this).text());
    });

    // 橡皮擦功能
    $("#scrawl-main .eraser-size").on("click", function () {

      if (erasering == true) {
        return;
      }
      erasering = true;
      context.save(); //保存canvas状态
      context.lineCap = "round";　//设置线条两端为圆弧
      context.lineJoin = "round";　//设置线条转折为圆弧
      context.lineWidth = 10;
      context.globalCompositeOperation = "destination-out";

    });

    //设置颜色
    $("#scrawl-main .colorBar span").on("click", function () {

      $("#scrawl-main .colorBar .active").removeClass("active");
      $(this).addClass("active");
      setColor($(this).data("color"));
    });

    // 开始绘制
    function startDrawing(e) {
      drawing = true;
      //记录上一步的数据
      prevSteps.push(context.getImageData(0, 0, configs.width, configs.height));
      // 创建一个新的绘图路径
      context.beginPath();
      // 把画笔移动到鼠标位置
      var offset = $(canvas).offset();
      context.moveTo(e.pageX - offset.left, e.pageY - offset.top);
      if (typeof options.onDraw == "function") {
        options.onDraw({
          opt: "start",
          x: e.pageX - offset.left,
          y: e.pageY - offset.top,
        });
      }
    }

    // 停止绘制
    function stopDrawing() {

      drawing = false;
      //清空下一步的数据集合，从新开始记录
      nextSteps = [];
      $nextBtn.disable();
      if (prevSteps.length == 1) {
        $prevBtn.enable();
        $clearBtn.enable();
      }
    }

    //绘制图像
    function doDrawing(e) {
      if (drawing) {
        // 找到鼠标最新位置
        var offset = $(canvas).offset();
        var x = e.pageX - offset.left;
        var y = e.pageY - offset.top;
        // 画一条直线到鼠标最新位置
        context.lineTo(x, y);
        context.stroke();
        if (typeof options.onDraw == "function") {
          options.onDraw({
            opt: "drawing",
            lineWidth: context.lineWidth,
            shadowBlur: context.shadowBlur,
            strokeStyle: context.strokeStyle,
            shadowColor: context.shadowColor,
            x: x,
            y: y,
          });
        }
      }
    }

    /**
     * 返回上一步操作
     */
    function gotoPrevStep() {
      if (prevSteps.length > 0) {
        //保存当前状态到下一步的操作历史库
        nextSteps.push(context.getImageData(0, 0, configs.width, configs.height));
        var popData = prevSteps.pop();
        context.putImageData(popData, 0, 0);
        $nextBtn.enable();

        if (prevSteps.length == 0) {
          $prevBtn.disable();
        }
      }
    }

    /**
     * 恢复下一步操作
     */
    function gotoNextStep() {
      if (nextSteps.length > 0) {
        //保存当前状态到上一步的操作历史库
        prevSteps.push(context.getImageData(0, 0, configs.width, configs.height));
        var imgData = nextSteps.pop();
        context.putImageData(imgData, 0, 0);
        $prevBtn.enable();

        if (nextSteps.length == 0) {
          $nextBtn.disable();
        }
      }
    }

    /**
     * 清空画板
     */
    function clearBoard() {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      prevSteps = [];
      nextSteps = [];

      $prevBtn.disable();
      $nextBtn.disable();
      $clearBtn.disable();
    }

    /**
     * 设置画笔颜色
     * @param color
     */
    function setColor(color) {
      if (!color) {
        color = $(".colorBar .active:eq(0)").data("color");
      }
      context.strokeStyle = color;
      context.shadowColor = color;
    }

    /**
     * 保存图片
     */
    function saveImage(_context) {
      // var image = new Image();
      // image.src = $("#picBoard img:eq(0)").attr("src");
      // image.onload = function () {
      // debugger
      const image = new Image();
      var canvas_old = $("#canvas-borad")[0];
      image.src = canvas_old.toDataURL("image/png");
      image.onload = function () {
        context.save();
        context.shadowBlur = 0;
        context.shadowColor = '#FFF';
        context.globalCompositeOperation = "destination-atop";

        context.drawImage(this, 0, 0, configs.width, configs.height);
        // debugger

        configs.save(canvas.toDataURL("image/png"));

      };
      //  image.src = dom
      // configs.image.onload = function () {
      //   configs.canvas = document.createElement("canvas")
      //   configs.width = this.naturalWidth;
      //   configs.height = this.naturalHeight;
      //   $("#preview").addClass("show");
      //   configs.canvas.width = configs.width;
      //   configs.canvas.height = configs.height;
      //   configs.canvas.id = "canvas-borad"
      //   configs.context = configs.canvas.getContext("2d");
      //   configs.context.rotate((0 * Math.PI) / 180)
      //   configs.context.drawImage(configs.image, 0, 0, configs.width, configs.height);
      //   $(`#${configs.canvasId}`).html(configs.canvas)
      // };




      // 
      // context.drawImage(_context, 0, 0)
      // context.restore();

      // debugger
      // }
    }


    //要导出的API
    o.nextStep = gotoNextStep;
    o.prevStep = gotoNextStep;
    o.setColor = setColor;
    o.save = saveImage;
    o.onDraw = function (x, y) {

    }
    return o;
  }


  window.Canvas = Canvas;
})(jQuery);